import { Meta, Canvas, Story } from '@storybook/addon-docs';
import { Avatar } from '@zendeskgarden/react-avatars';
import { MenuStory } from './stories/MenuStory';
import { ChromeStory } from './stories/ChromeStory';
import { StatusMenuStory } from './stories/StatusMenuStory';

<Meta title="Packages/Avatars/[patterns]" component={Avatar} />

# Patterns

## Chrome

Use an `extrasmall` avatar within a Chrome `HeaderItem` in order to provide a
user profile menu. Remember to add the `isRound` prop to the header item so that
the keyboard focus ring is properly styled. Status may be added to this avatar
without impacting the height of the header. See the code for details.

<Canvas>
  <Story
    name="Chrome"
    parameters={{ controls: { include: ['badge', 'status'] } }}
    argTypes={{ badge: { control: 'boolean' } }}
  >
    {args => <ChromeStory {...args} badge={args.badge ? 1 : undefined} />}
  </Story>
</Canvas>

## Menu

The following example demonstrates intended avatar sizing within menus.
Additionally, note the detail of dynamically modifying `surfaceColor` to blend
with the menu item's highlight color on focus and hover. See the code for
details.

<Canvas>
  <Story
    name="Menu"
    parameters={{ controls: { include: ['isCompact'] } }}
    args={{ isCompact: false }}
    argTypes={{ isCompact: { control: 'boolean' } }}
  >
    {args => <MenuStory {...args} />}
  </Story>
</Canvas>

## Status Menu

The following example demonstrates StatusIndicator being used in a menu.

<Canvas>
  <Story
    name="StatusMenu"
    parameters={{ controls: { include: ['isCompact'] } }}
    args={{ isCompact: false, type: 'available' }}
    argTypes={{ isCompact: { control: 'boolean' } }}
  >
    {args => <StatusMenuStory {...args} />}
  </Story>
</Canvas>
